<template>
  <NavBar showBack :title="_params.shopType == 1 ? '附近的销售网点' : '附近的售后网点'"></NavBar>
  <view class="box-itm" v-for="item in shopList" :key="item.id" @click="onBack(item)">
    <view :class="`check-radio ${activeId === item.id && 'active'}`"></view>
    <view class="itm-left">
      <image class="itm-logo" :src="item.logo"></image>
      <view class="itm-content">
        <view class="box-itm-name one-ellipsis">{{ item.name }}</view>
        <view class="box-itm-adress one-ellipsis">
          <image class="icon" :src="getImageSrc('static/icons/icon-subtract.png')"></image>
          <text>{{ item.address }}</text>
        </view>
        <view class="box-itm-way one-ellipsis">
          <image class="icon" :src="getImageSrc('static/icons/icon-vector.png')"></image>
          <text>{{ item.distance }}km</text>
        </view>
      </view>
    </view>
    <image class="icon-arrow" :src="getImageSrc('static/icons/right-arrows.png')"></image>
  </view>
  <NoData :list="shopList" title="附近暂无店铺" :total="shopList.length" />
</template>

<script setup>
import { onMounted, ref } from "vue"
import { router } from "@/path/router";
import service from "@/path/service"
import NavBar from "@/components/ui/nav-bar"
import { getUserLocation } from "@/path/location";
import NoData from "@/components/tool/no-data"
import { getImageSrc } from '@/path/until';
const activeId = ref()
const _params = ref({
  lat: 0,
  lng: 0,
  //1销售网点2售后网点，默认销售网点
  shopType: 1,
  //条数，最大50，默认10
  // limit: "10",
  // //距离范围，默认20公里
  distance: "20000",
})
const shopList = ref([])
function onBack(item) {
  router.back({ data: { ...item } })
  // activeId.value = item.id
}
onMounted(() => {
  const _router = router.getData() || {}
  activeId.value = _router?.shopId
  _params.value.shopType = _router?.shopType || 1
  getUserLocation().then((res) => {
    _params.value.lat = res.latitude
    _params.value.lng = res.longitude
    return service.get("api/ycg/home/nearshop", _params.value).then((res) => {
      shopList.value = res
    })
  })
})
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
